<template>
  <div id="test" @click="GoDetailBlog">
    <transition appear appear-active-class="fadeInY">
      <div class="PCblogOpt" v-bolang="'#5183e6'">
        <div class="target" :style="{ backgroundColor: chooseColor }">
          {{ props.way }}
        </div>
        <div class="header">
          <span class="time">
            <i class="iconfont iconshijian00" :style="{ fontSize: '15px' }"></i>
            {{ format }}
          </span>
          <span class="see">
            <i class="iconfont iconyanjing" style="color: #5183e6"></i>
            <span style="color: #5183e6">{{ seeNum }}</span>
          </span>
          <span class="see">
            <i class="iconfont icondianzan" style="color: #5183e6"></i>
            <span style="color: #5183e6">{{ goodNum }}</span>
          </span>
          <span class="see">
            <i class="iconfont iconshoucang" style="color: #5183e6"></i>
            <span style="color: #5183e6">{{ collectNum }}</span>
          </span>
        </div>
        <div class="content">
          <div class="title">
            <h3>{{ title }}</h3>
          </div>
          <div class="simpleContent">{{ abstract }}</div>
          <!-- <hr /> -->
          <!-- <div style="width:100%;height:1px;background-color:#ebf2f6"></div> -->
        </div>
        <!-- <footerblog :way="way" :id="id" class="footer"></footerblog> -->
        <!-- <div class="BGImg" :style="{'backgroundImage':'url('+BGImg+')'}"></div> -->
        <!-- <div class="BGImg"></div> -->
      </div>
    </transition>
  </div>
</template>

<script lang="ts" setup>
import { formatTime } from "@/formatTime";
import { useUserStore } from "@/store";
import { defineProps, ref, computed } from "vue";
import $axios from "@/http";
import { useRoute, useRouter } from "vue-router";
const $store = useUserStore();
const $router = useRouter();
const $route = useRoute();
const props = defineProps([
  "title",
  "time",
  "img",
  "abstract",
  "seeNum",
  "way",
  "id",
  "index",
  "goodNum",
  "collectNum",
]);
const flag = ref<boolean>(true);
const thinks = ref<boolean>(false);
const blogGoodNum = ref<number>(0);
const blogCollectNum = ref<number>(0);
const format = computed(() => formatTime(props.time));

const chooseColor = computed(() => {
  switch (props.way) {
    case "全部":
      return "CA97FE99";
    case "vue":
      return "#41B88399";
    case "react":
      return "#82d7f799";
    case "node":
      return "#026E0099";
    case "js":
      return "#FDD30399";
    case "css":
      return "#0170E699";
    case "其他":
      return "#AB617399";
    case "随笔":
      return "#6a6a6a99";
    default:
      return "#AB617399";
  }
});
const ifCurrentBlogHasCollect = () => {
  $axios
    .get("/collect/search", {
      params: {
        blogId: $route.params.id,
        username: $store.user.username,
      },
    })
    .then((res) => {
      if (res.data.error === -1) {
        blogCollectNum.value = res.data.data.length;
      } else {
        blogCollectNum.value = 0;
      }
    });
};
const ifCurrentBlogHasGood = () => {
  $axios
    .get("/history/search", {
      params: {
        blogId: $route.params.id,
        username: $store.user.username,
      },
    })
    .then((res) => {
      console.log(res);
      if (res.data.error === -1) {
        blogGoodNum.value = res.data.data.length;
      } else {
        blogGoodNum.value = 0;
      }
    });
};
const GoDetailBlog = () => {
  $router.push("/detail/" + props.id);
};
</script>

<style lang="scss" scoped>
@import "../../css/comment/animate.css";
#test {
  position: relative;
  z-index: 2;
  user-select: none;
}
.BGImg {
  position: absolute;
  z-index: -1;
  margin: 20px 25px;
  padding: 10px 0;
  right: -26px;
  top: -8%;
  border-radius: 15px;
  background-size: 100% 100%;
  width: 100%;
  height: 150px;
  opacity: 0.3;
  // border: 1px solid rgba(255, 255, 255, 0.8);
}
.PCblogOpt {
  box-sizing: border-box;
  padding: 12px 0;
  // border-radius: 15px;
  height: 100px;
  margin: 20px 25px;
  // border: 3px solid white;
  transition: all 0.3s 0s;
  position: relative;
  z-index: 3;
  background-color: rgba(255, 255, 255, 0.7);
  overflow: hidden;
  border-radius: 5px;
  .target {
    width: 80px;
    height: 20px;
    color: #33333388;
    position: absolute;
    top: 8px;
    right: -20px;
    text-align: center;
    transform: rotate(45deg);
    font-size: 12px;
    line-height: 20px;
    font-weight: bolder;
  }
  .header {
    padding-left: 15px;
    display: flex;
    font-size: 12px;
    justify-content: flex-start;
    color: #333;
    font-weight: 100;
    font-family: veria Sans Libre, Fantasy;
    .time {
      color: rgba(3, 3, 3, 0.4);
      margin-right: 20px;
      i {
        vertical-align: middle;
        margin-right: 5px;
        font-size: 12px;
        // color: #777777;
      }
    }
    .see {
      color: rgba(3, 3, 3, 0.4);
      margin-right: 12px;
      i {
        margin-right: 5px;
        font-size: 12px;
        // color: #333;
      }
    }
    .collect {
      i {
        margin-right: 5px;
        font-size: 15px;
        color: #f5de19;
      }
    }
    .good {
      i {
        margin-right: 5px;
        font-size: 15px;
        color: #fb7299;
      }
    }
  }
  .content {
    text-align: left;
    height: 79%;
    margin-top: 8px;
    padding-left: 15px;
    overflow: hidden;
    // border-bottom: 1px solid #777777;
    .simpleContent {
      text-align: left;
      font-size: 14px;
      height: 66%;
      // padding-left: 5px;
      margin-top: 10px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: rgba(0, 0, 0);
      font-weight: 300;
      color: #666666;
    }
    h1 {
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      transition: all 0.5s;
      cursor: url("../../assets/img/cur/mais.png"), default;

      font-weight: 200;
      &:hover {
        color: red;
        transform: translateX(-50px);
      }
    }
  }
  .img {
    margin-left: 30px;
    img {
      background-color: cyan;
      margin-top: 15px;
      border-radius: 15px;
      height: 200px;
      width: 200px;
    }
  }
  &:hover {
    // transform: translateY(-20px);
    transform: scale(1.02);
    background-color: rgba(255, 255, 255, 0.83);

    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.3);
  }
}
.thinks-leave-active {
  animation: fade 0.3s linear;
}
@keyframes fade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-50px);
  }
}

// @media screen and (max-width: 765px) {
//   .PCblogOpt {
//     padding: 20px 10px;
//     background: rgba(255, 255, 255, 0.8);
//     border-radius: 15px;
//     height: 250px;
//     margin: 20px 25px;
//     // border: 1px solid white;
//     transition: all 0.5s;

//     .content {
//       h1 {
//         width: 100%;
//         white-space: nowrap;
//         overflow: hidden;
//         text-overflow: ellipsis;
//       }
//       .simpleContent {
//         text-align: left;
//         font-size: 17px;
//         // width: 100%;
//         height: 55%;
//         overflow: hidden;
//       }
//     }
//     .header {
//       display: block;
//       .time {
//         display: block;
//       }
//       .good {
//         margin-left: 5%;
//       }
//       .thinks {
//         position: absolute;
//         right: 22px;
//       }
//     }
//   }
//   .thinks-leave-active {
//     animation: fade 0.3s linear;
//   }
//   @keyframes fade {
//     0% {
//       opacity: 1;
//     }
//     100% {
//       opacity: 0;
//       transform: translateY(-50px);
//     }
//   }
// }
// @media screen and (max-width: 765px) {
//   .BGImg {
//     width: 100%;
//     height: 272px;
//     background-size: 100% 100%;
//     margin: 20px 60px;
//     padding: 10px 0;
//     opacity: 0.3;
//     right: -61px;
//   }
// }
</style>
